<template>
    <div>
        <el-container>
            <el-header height="80px">巴拉巴拉后台管理系统
                <div class="xix">欢迎主人回家：{{ $store.getters.getUser.username }}</div>
                <div class="xixx">
                    <el-button type="danger" size="small" @click="logout">退出</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="260px">
                    <v-nav></v-nav>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import vNav from '@/components/vNav.vue';
export default {
    data() {
        return {};
    },
    components: {
        vNav
    },
    methods: {
        //封装一个退出事件
        logout() {
            //清空存储
            this.$store.dispatch('changeUserAction', false)
            //跳转回登录
            this.$router.push('/login')
        }
    }
};
</script>

<style lang="less" scoped>
.el-header {
    background-color: rgb(81, 142, 203);
}

.el-menu {
    // width: 260px;
    min-height: 600px;
}

.el-header {
    color: #fff;
}

.xix {
    float: right;
}

.xixx {
    float: right;
    margin-top: 30px;
    margin-right: -160px;
}
</style>